<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="Thymeleaf"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>

    <meta charset="UTF-8"/>

    <title>B系统页面</title>

</head>

<body>

<h3>B系统-index</h3>
username:<h1 style="color: green" th:text="${ssoUser.username}"></h1>
<a th:href="@{http://localhost:8081/appA?(sso_session_id=${ssoUser.sessionId})}">
    访问A系统
</a>
</br>
<a th:href="@{http://localhost:8082/appB/logout?(sso_session_id=${ssoUser.sessionId})}">
    退出系统
</a>
</br>
<button onclick="getUser()">获取用户信息</button>
</br>
用户信息:
<textarea cols="50" rows="5" id="userInfo"></textarea>
<input type="hidden" id="sessionId" th:value="${ssoUser.sessionId}">

<script  type="text/javascript" th:src="@{/js/jquery3.4.1.js}"></script>

<script type="text/javascript">
    /**
     * 浏览器缓存sessionId,每次请求都自动携带该header,当然,这并不适合浏览器,更适合移动端,由移动端保存
     * 每次请求都在header中携带sessionId
     */
    localStorage.setItem('sessionId', $("#sessionId").val());

    $.ajaxSetup({
        beforeSend: function(xhr) {
            xhr.setRequestHeader("sso_session_id", localStorage.getItem('sessionId'));
        },
        success: function(result) {
            alert(result);
        }

    });
    function getUser() {
        $.ajax({
            method: "get",
            url: "/appB/user",
            dataType: 'json',
            success: function (result) {
                $("#userInfo").val(JSON.stringify(result));
            }
        })
    }
</script>
</body>

</html>
